<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        margin: 30px auto;
      }
      input {
        height: 30px;
        width: 150px;
      }
      body > input {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h3>输入年月日 计算是这一年的第几天</h3>
    <div>
      <input type="text" id="year" placeholder="请输入年份" />
      <input type="text" id="month" placeholder="请输入月份" />
      <input type="text" id="day" placeholder="请输入几号" />
      <button id="calc">计算</button>
    </div>
    <input type="text" id="reason" placeholder="结果是" />
    <script>
      var y_Ele = document.getElementById("year");
      var m_Ele = document.getElementById("month");
      var d_Ele = document.getElementById("day");
      //获得年月日输入框的输入数据
      calc.onclick = function () {
        var year = parseInt(y_Ele.value);
        var b = parseInt(m_Ele.value);
        var c = parseInt(d_Ele.value);
        var sum;
        switch (b) {
          case 1:
            sum = 0;
            break;
          case 2:
            sum = 31;
            break;
          case 3:
            sum = 59;
            break;
          case 4:
            sum = 90;
            break;
          case 5:
            sum = 120;
            break;
          case 6:
            sum = 151;
            break;
          case 7:
            sum = 181;
            break;
          case 8:
            sum = 212;
            break;
          case 9:
            sum = 243;
            break;
          case 10:
            sum = 273;
            break;
          case 11:
            sum = 304;
            break;
          case 12:
            sum = 334;
            break;
        }
        sum += c;
        if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
          reason.value = sum + 1;
        } else reason.value = sum;
      };
    </script>
  </body>
</html>
